<div class="button-item">
    <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="save()" label="保存"></button>
    <button pButton type="text" icon="fa fa-plus" (click)="addCond()" label="添加"></button>
</div>

<p-table [columns]="cols" [value]="conds" [reorderableColumns]="true" [scrollable]="true"
    [scrollHeight]="'calc(100vh - 245px)'">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width:2.5em"></th>
            <th *ngFor="let col of columns" pReorderableColumn [ngStyle]="col.style">
                {{col.header}}
            </th>
            <th style="width:2.5em"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
        <tr [pReorderableRow]="index">
            <td style="width:2.5em">
                <i class="fa fa-bars" pReorderableRowHandle></i>
            </td>
            <ng-container *ngFor="let col of columns;">
                <!-- 名称 -->
                <td *ngIf="col.field == 'fieldDisplayName'" [ngStyle]="col.style">
                    {{rowData[col.field]}}
                </td>
                <!-- 控件类型 -->
                <td *ngIf="col.field == 'condTypeId'" [ngStyle]="col.style">
                    <p-dropdown [options]="condTypes" [(ngModel)]="rowData.condTypeId" [style]="{'width':'100%', 'border': 'none', 'border-radius': '0px'}"
                        appendTo="body">
                    </p-dropdown>
                </td>
                <!--条件是否必填-->
                <td pEditableColumn *ngIf="col.field == 'requireFlag'" [ngStyle]="col.style">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                        </ng-template>
                        <ng-template pTemplate="output">
                            <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn *ngIf="col.field == 'checkDict' || col.field == 'extendSql'" [ngStyle]="col.style">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData[col.field]" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData[col.field]}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </ng-container>
            <td style="width:2.5em">
                <i class="fa fa-times" (click)="deleteCond(rowData)"></i>
            </td>
        </tr>
    </ng-template>
</p-table>